<template>
  <view>
    <view class="tabbar-title">
      <v-tabs v-model="activeTab" bgColor="#F0F3F6" :fixed="true" :lineScale="0.2" :scroll="false" :tabs="tabs"
              @change="changeTab" activeFontSize="32rpx" fontSize="30rpx"></v-tabs>

    </view>
    <!-- 电梯信息-  相关联系人 -->
    <view class="" v-show="activeTab == 0">
      <ElevatorDetail :elevatorInfo="elevatorInfo" :elevatorId="elevatorId"></ElevatorDetail>
    </view>
    <tm-scrolly ref="scrollRef" :height="listHeight" :refresher="false" @bottom="onScrollToBottom">
      <!-- 故障列表 -->
      <view class="" v-show="activeTab == 1">

        <view class="" v-if="recordList.length > 0">
          <uni-card v-for="(item,index) in recordList" :key="index">
            <view class="record" @click="toRecord(item.faultId);">
              <view class="record-address">
                {{ item.elevatorName }}
                <!-- <text>{{item.intervalTime}}</text> -->
              </view>
              <view class="record-state">
                <DictTag :dict-value="getDict(DictEnum.IOT_FAULT_TYPE)" :value="item.faultType"></DictTag>
              </view>
              <view class="information">
                <!-- left -->
                <view class="information-left">
                  <view class="record-time">
                    故障楼层:
                    <text>{{ item.faultFloor || '暂无' }}</text>
                  </view>
                  <view class="record-time">
                    故障时长:
                    <text>{{ item.faultDuration || '暂无' }}</text>
                  </view>
                </view>
                <!-- 已完成 right-->
                <view class="successState">
                  <image src="../../../../static/image/fault/fault_icon.png" mode=""></image>
                  <!-- <uni-icons type="success"></uni-icons> -->
                  <view class="">
                    <DictTag :dict-value="getDict(DictEnum.IOT_HANDLE_STATUS)" :value="item.disposeState"></DictTag>
                  </view>
                </view>
              </view>
            </view>
          </uni-card>
        </view>
      </view>
    </tm-scrolly>
    <view class="" v-if="recordList.length === 0 && activeTab != 0">
      <nullPage></nullPage>
    </view>
  </view>
</template>

<script>
import ElevatorDetail from '@/components/ElevatorDetail.vue'
import nullPage from '@/components/null.vue'
import {useWindowInfo} from "@/tmui/tool/useFun/useWindowInfo";
import {getElevator} from "@/api/iot/elevator";
import {listElevatorFault} from "@/api/iot/elevatorFault";
import {getDict} from "@/utils/dict";
import {DictEnum} from "@/enums/dictEnum";

export default {
  computed: {
    DictEnum() {
      return DictEnum
    }
  },
  components: {
    ElevatorDetail,
    nullPage
  },
  data() {
    return {
      activeTab: 0,
      tabs: ['电梯信息', '故障'],
      // 相关联系人
      contactInformation: [],
      listHeight: 1000,
      // 故障内容
      recordList: [],
      elevatorId: "", //电梯ID
      elevatorInfo: {},
      pageNum: 1,
      getListFlag: true,

    }
  },
  onLoad(e) {
    console.log(e);
    /**
     * 获取页面高度 减去上面筛选的高度 再减去下面底部的高度 单位px
     * 返回需要转换为rpx
     */
    const windowInfo = useWindowInfo();
    /**
     * h5获取的height是所有元素的height
     * 微信获取的height是不包标题栏的
     * 但是h5的标题高度会在top属性显示  微信为0
     * 使用height - top就是实际页面高度 不用判断环境了
     */
    const windowHeight = windowInfo.height;
    const titleHeight = windowInfo.top;
    // 头部区域高度
    const headHeight = 40;
    // 底部区域高度
    const bottomHeight = 30;
    const bottomSafe = windowInfo.bottomSafe;
    this.listHeight = uni.$tm.u.torpx(
        windowHeight - titleHeight - headHeight - bottomHeight - bottomSafe,
    );
    this.elevatorId = e.elevatorId
    this.getElevatorDetail()
  },
  methods: {
    getDict,
    // 电梯详情
    async getElevatorDetail() {
      // let parme = {}
      const res = await getElevator(this.elevatorId);
      this.elevatorInfo = res
      uni.setNavigationBarTitle({
        title: this.elevatorInfo.elevatorName,
      })

    },
    // 显示全部
    showAll() {
      console.log(1111)
    },
    // 导航切换
    changeTab(index) {
      if (index == 1 && this.recordList.length == 0) {
        this.getFaultList();
      }
    },
    async getFaultList() {
      const res = await listElevatorFault({
        elevatorId: this.elevatorId,
        pageNum: this.pageNum,
        pageSize: 10,
      });
      if (res.rows.length < 10) {
        this.getListFlag = false;
      }
      this.recordList.push(...res.rows)
    },
    // 使用信息 展开 ，收起事件
    change(e) {

    },
    onScrollToBottom(e) {
      if (this.getListFlag) {
        this.pageNum = this.pageNum + 1;
        this.getFaultList();
      }
    },
    toRecord(faultId) {
      uni.navigateTo(
          {
            url: '/pages/tabbar/polling/faultDetails/faultDetails?faultId=' + faultId
          }
      )
    },
  },
}
</script>

<style scoped>
/* .uni-view{
  height: 154rpx;
} */
.tabs {
  /* height: 200rpx; */
}

.v-tabs {
}

.v-tabs__container {
  height: 200rpx !important;
  line-height: 100rpx !important;
}

.uni-card {
  width: 670rpx;
  /* height: 820rpx; */
  background: #FFFFFF;
  box-shadow: 0rpx 10rpx 10rpx 0rpx rgba(52, 54, 61, 0.05);
  border-radius: 16rpx;
  margin: 0 auto;
  border: none;
  margin-bottom: 30rpx;
}

.v-tabs {
  height: 154rpx;
  background-color: #F0F3F6;
}

.linkman {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-weight: bold;
  font-size: 30rpx;
  color: #34363D;
}

.linkman text {
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: #017EFE;

}

.photo {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 20rpx 0;
}

.photo-img {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.photo-left {
  font-size: 30rpx;
  font-weight: 400;
  color: #34363D;
  margin-left: 30rpx;

}

.photo-admin {

  font-size: 24rpx;
  color: #989BA6;
}

/* 右边电话图标 */
.photo image {
  width: 80rpx;
  height: 79rpx;
  border-radius: 50%;

}

.photo-icon {
  display: flex;
  /* justify-content: center; */
  align-items: center;
}

.photo-icon image {
  width: 36rpx;
  height: 37rpx;
  vertical-align: middle;
}

/* 使用信息 */
.uni-collapse-item {
  color: #FFFFFF;
}

.uni-collapse-cell--open[data-v-8f47561c] {
  background-color: #FFFFFF;
}

/* 注册码 */
.registration {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  font-size: 30rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: #989BA6;
  padding: 30rpx;
}

.registration text {
  font-size: 30rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: #34363D;
}

.registration text:nth-child(4) {
  color: #017EFE;
}

/* 底部 */
.footer {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  /* display: inline-block; */
  /* justify-content: center; */


}

.footer-div {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  text-align: center;

  height: 200rpx;
  background: #FFFFFF;

  border-radius: 16rpx;

}

.footer-image {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  border-right: 1px solid #E2E6EF;
}

.footer-image:nth-child(2) {
  border-right: none;
}

.footer-image image {
  width: 40rpx;
  height: 40rpx;

}

.footer-recordName {

  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: #989BA6;

}

/* 故障样式 */
/* .uni-icons{
  color:#FF5753 ;
} */
/* 	.uni-card{
    width: 670rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 10rpx 10rpx 0rpx rgba(52, 54, 61, 0.05);
    border-radius: 16rpx;
    margin: 0 auto;
    margin-top: 20rpx;
    border: none;
    line-height: 280rpx;
    text-align: left;
  } */
.record {
  font-family: PingFang SC;
  font-weight: 400;
  /* margin: 40rpx 0; */
}

.record-address {
  font-size: 30rpx;
  color: #34363D;
  display: flex;
  justify-content: space-between;
  margin-bottom: 30rpx;
}

.record-address text {
  color: #017EFE;
}

.record-state {
  font-size: 30rpx;
  color: #017EFE;
}

/* 左右 信息*/
.information {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
}

.record-time {
  font-size: 24rpx;
  color: #989BA6;
}

.successState {
  width: 178rpx;
  background: #FF5753;
  height: 60rpx;
  text-align: center;
  box-shadow: 0px 5px 10px 0px rgba(58, 194, 17, 0.2);
  border-radius: 28rpx;
  color: #FFFFFF;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.successState image {
  width: 30rpx;
  height: 30rpx;
  background: #FF5753;
  border-radius: 10rpx;
  vertical-align: middle;
}

.successState text {
  font-size: 24rpx;
  margin-left: 10rpx;
}

/* 时间内容的间距 */
.record-time text {
  margin-left: 15rpx;
  color: #34363D;
  word-spacing: 15rpx;
  letter-spacing: 1rpx;
}
</style>
